<template>
  <div>
    <el-input v-model="district" placeholder="请输入区名称" style="width: 300px; margin-left: -480px;"></el-input>
    <el-button type="primary" plain style="margin-left: 5px;" @click="search">查询</el-button>
    <el-button type="success" plain style="margin-left: 5px;" @click="save" >新增</el-button>
    <el-button type="danger" plain style="margin-left: 5px;" @click="dropBatch" >批量删除</el-button>
    <el-table
        ref="multipleTable"
        :data="districtTableData"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="province"
          label="省"
          width="120">
      </el-table-column>
      <el-table-column
          prop="city"
          label="市"
          width="120">
      </el-table-column>
      <el-table-column
          prop="district"
          label="区"
          width="120">
      </el-table-column>
      <!--      //删除修改按钮-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">Edit</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页栏-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--新增对话框-->
    <el-dialog title="地址信息"  :visible.sync="dialogFormVisible" @close="clearForm" center>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="省" :label-width="formLabelWidth" prop="province">
          <el-input v-model="form.province" autocomplete="off" placeholder="请输入省名称"></el-input>
        </el-form-item>
        <el-form-item label="市" :label-width="formLabelWidth" prop="city">
          <el-input v-model="form.city" autocomplete="off" placeholder="请输入市名称"></el-input>
        </el-form-item>
        <el-form-item label="区" :label-width="formLabelWidth" prop="district">
          <el-input v-model="form.district" autocomplete="off" placeholder="请输入区名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑对话框-->
    <el-dialog title="地址信息"  :visible.sync="dialogFormVisible1" @close="clearForm" center>
      <el-form :model="forms" :rules="rules1" ref="ruleForm">
        <el-form-item label="省" :label-width="formLabelWidth" prop="province1">
          <el-input v-model="forms.province" autocomplete="off" placeholder="请输入省名称"></el-input>
        </el-form-item>
        <el-form-item label="市" :label-width="formLabelWidth" prop="city1">
          <el-input v-model="forms.city" autocomplete="off" placeholder="请输入市名称"></el-input>
        </el-form-item>
        <el-form-item label="区" :label-width="formLabelWidth" prop="district1">
          <el-input v-model="forms.district" autocomplete="off" placeholder="请输入区名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "district",
data(){
  return{
    district:'',
    districtTableData:[],
    curPage:1,
    pageSize:5,
    total:0,
    form:{
      id:'',
      province:'',
      city:'',
      district:'',
    },
    dialogFormVisible:false,
    forms:{
      id:'',
      province:'',
      city:'',
      district:'',
    },
    dialogFormVisible1:false,
    formLabelWidth:'120px',
    rules:{
      province:[
        { required: true, message: '请输入省名称', trigger: 'blur' }
      ],
      city:[
        { required: true, message: '请输入市名称', trigger: 'blur' }
      ],
      district:[
        { required: true, message: '请输入区名称', trigger: 'blur' }
      ],
    },
    rules1:{
      province:[
        { required: true, message: '请输入省名称', trigger: 'blur' }
      ],
      city:[
        { required: true, message: '请输入市名称', trigger: 'blur' }
      ],
      district:[
        { required: true, message: '请输入区名称', trigger: 'blur' }
      ],
    },
  }
},
created() {
  this.init()
},
methods:{
  clearForm(){
    this.$refs.ruleForm.resetField()
  },
  //编辑对话框确定按钮
  async ensure1(){
    this.$refs.ruleForm.validate(async valid=> {
      if (valid) {
        let res=await  this.$axios.get('/district/update',{
          params:this.forms
        })
        if(res.data.code===200){
          this.dialogFormVisible1=false
          this.init()
        }else {
          alert("操作失败")
        }
      } else {
        /*console.log('error submit!!');*/
        return false;
      }
    })
  },
  //编辑
  handleEdit(row){
    this.forms.id=row.id
    this.forms.province=row.province
    this.forms.city=row.city
    this.forms.district=row.district
    this.dialogFormVisible1=true
  },
  //批量删除
  dropBatch(){
    let ids=this.$refs.multipleTable.selection
    if(ids.length===0){
      this.$message({
        type: 'warning',
        message: '你还没有选择要删除的仓库!'
      });
      return
    }
    let temp=''
    ids.forEach((item,i)=>{
      temp+='&id='+item.id
    })
    temp=temp.substring(1)
    this.$confirm('此操作将永久删除该物品, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      let res=await this.$axios.get('/district/drop?'+temp)
      if(res.data.code===200){
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.curPage=1
        this.init()
      }else {
        this.$message({
          type: 'error',
          message: '删除失败'
        });
      }
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
  },
  //删除
  async handleDelete(row) {
    this.$confirm('此操作将永久删除该仓库, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      let res=await this.$axios.get('/district/drop?id='+row.id)
      if(res.data.code===200){
        //alert(111)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.curPage=1
        this.init()
      }else {
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      }
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });
    });
    /*console.log(row);*/
  },
  //新增对话框确定按钮
  async ensure(){
    this.$refs.ruleForm.validate(async valid=> {
      if (valid) {
        let res =await this.$axios.get('/district/save',{
          params:this.form
        })
        if(res.data.code===200){
          this.dialogFormVisible=false
          this.init()
        }else {
          alert("操作失败")
        }
      } else {
        return false;
      }
    })
  },
  //新增
  save(){
    this.dialogFormVisible=true
  },
  //查询
  search(){
    this.curPage=1
    this.init()
  },
  //多条件分页查询
  async init(){
    let res=await this.$axios.get('/district/queryByPage',{
      params:{
        curPage:this.curPage,
        pageSize:this.pageSize,
        district:this.district
      }
    })
    this.districtTableData=res.data.data
    this.total=res.data.total
  },
  handleSizeChange(val) {
    this.pageSize=val
    this.init()
    // console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    this.curPage=val
    this.init()
    // console.log(`当前页: ${val}`);
  }
 }
}
</script>

<style scoped>

</style>